<!-- 编辑、查看 -->
<template>
  <base-breadcrumb :title="$route.meta.title">
    <a-spin :spinning="spinning">
      <a-card>
        <title-name title="生产带班记录" />
        <a-form-model
          ref="form"
          layout="horizontal"
          :model="form"
          :rules="rules"
        >
          <a-row :gutter="24">
            <a-col
              :md="16"
              :sm="16"
            >
              <a-form-model-item
                class="custom-width requiredFormItem"
                prop="branchId"
                label="所属单位"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <org-tree-select
                  check-strictly
                  is-need-auth
                  is-auto-select-first
                  :disabled="formType == 'disable'"
                  v-model="form.projectId"
                  @select="selectOrg"
                  @getProjectInfo="getProjectInfo"
                />
              </a-form-model-item>
            </a-col>
            <!--            <a-col-->
            <!--              :md="8"-->
            <!--              :sm="8"-->
            <!--            >-->
            <!--              <a-form-model-item-->
            <!--                class="custom-width requiredFormItem"-->
            <!--                prop="branchId"-->
            <!--                label="分公司"-->
            <!--                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"-->
            <!--                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"-->
            <!--              >-->
            <!--                <SelectSubCompany-->
            <!--                  :disabled="formType == 'disable'"-->
            <!--                  v-model="form.branchId"-->
            <!--                  ref="SelectSubCompany"-->
            <!--                  placeholder="请选择"-->
            <!--                  @change="changeSelectSubCompany"-->
            <!--                />-->
            <!--              </a-form-model-item>-->
            <!--            </a-col>-->
            <!--            <a-col-->
            <!--              :md="8"-->
            <!--              :sm="8"-->
            <!--            >-->
            <!--              <a-form-model-item-->
            <!--                class="custom-width requiredFormItem"-->
            <!--                label="项目名称"-->
            <!--                prop="projectId"-->
            <!--                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"-->
            <!--                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"-->
            <!--              >-->
            <!--                <BaseInput-->
            <!--                  v-if="formType == 'disable'"-->
            <!--                  v-model="form.projectName"-->
            <!--                  placeholder=""-->
            <!--                  disabled-->
            <!--                />-->
            <!--                <SelectProject-->
            <!--                  v-else-->
            <!--                  v-model="form.projectId"-->
            <!--                  placeholder="请选择"-->
            <!--                  :form="form"-->
            <!--                  :is-clear="true"-->
            <!--                  :disabled="formType == 'disable'"-->
            <!--                  ref="projectDom"-->
            <!--                  key-value="branchId"-->
            <!--                  @change="getManagerNameReq"-->
            <!--                  @projectNum="projectNums"-->
            <!--                />-->
            <!--              </a-form-model-item>-->
            <!--            </a-col>-->
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                class="custom-width"
                label="项目地址"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <BaseInput
                  v-model="form.projectAddress"
                  placeholder=""
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                class="custom-width"
                label="项目经理"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <BaseInput
                  v-model="form.pmName"
                  placeholder=""
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                class="custom-width"
                label="项目经理电话"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <BaseInput
                  v-model="form.pmPhone"
                  placeholder=""
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                label="形象进度"
                prop="imageProgressId"
                class="custom-width requiredFormItem"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <a-select
                  v-model="form.imageProgressId"
                  allow-clear
                  :disabled="formType == 'disable'"
                  option-filter-prop="label"
                  placeholder="请选择"
                  option-label-prop="label"
                  @change="changeImageProgress"
                >
                  <a-icon
                    v-if="fetching"
                    slot="suffixIcon"
                    style="color: #096dd9"
                    type="loading"
                  />
                  <a-spin
                    v-if="fetching"
                    slot="notFoundContent"
                    size="small"
                  />
                  <template v-else>
                    <a-select-option
                      v-for="item in memberList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </template>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                class="custom-width"
                label="带班人"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <BaseInput
                  v-model="form.creatorName"
                  placeholder=""
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                class="custom-width requiredFormItem"
                label="带班日期"
                prop="shiftDate"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <a-date-picker
                  :disabled="formType == 'disable'"
                  :value="form.shiftDate"
                  :disabled-date="disabledDate"
                  format="YYYY-MM-DD"
                  @change="onChangeShiftDate"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="8"
              :sm="8"
            >
              <a-form-model-item
                class="custom-width"
                label="创建日期"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <BaseInput
                  v-model="form.createTime"
                  placeholder=""
                  disabled
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-model-item
                class="custom-width requiredFormItem"
                label="带班内容"
                prop="shiftContent"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <BaseTextarea
                  v-model="form.shiftContent"
                  :disabled="formType == 'disable'"
                  placeholder="请输入"
                  :max-length="3000"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-model-item
                class="feedbacks custom-width"
                label="图片上传"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <l-table
                  business-code="PM39"
                  :edit-model="formType === 'disable' ? 0 : 2"
                  :upload-arrys.sync="form.photoInfoList"
                  upload-type="image"
                  error-tips="附件名称中必须含有中文"
                  :need-chinese-name="true"
                />
                <span style="position: absolute; top: 0">{{
                  formType === 'disable' && (!form.photoInfoList || !form.photoInfoList.length) ? '无' : ''
                }}</span>
              </a-form-model-item>
            </a-col>
            <a-col
              :md="24"
              :sm="24"
            >
              <a-form-model-item
                class="feedbacks custom-width"
                label="附件"
                :label-col="{ lg: { span: 4 }, sm: { span: 4 } }"
                :wrapper-col="{ lg: { span: 20 }, sm: { span: 20 } }"
              >
                <l-table
                  :is-close="formType !== 'disable'"
                  business-code="PM40"
                  :upload-arrys.sync="form.fileInfoList"
                  error-tips="附件名称中必须含有中文"
                  :need-chinese-name="true"
                />
                {{ formType === 'disable' && (!form.fileInfoList || !form.fileInfoList.length) ? '无' : '' }}
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-card>
    </a-spin>

    <div class="page-btn-right-top">
      <a-button
        v-if="formType != 'disable'"
        class="ml20"
        :loading="loading"
        type="primary"
        @click="submitHandler('draft')"
      >
        保存草稿
      </a-button>
      <a-button
        v-if="formType != 'disable'"
        class="ml20"
        :loading="loading"
        type="primary"
        @click="submitHandler('save')"
      >
        提 交
      </a-button>
      <a-button
        class="ml20"
        type="primary"
        @click="handleClose"
      >
        关 闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/SelectProjects/SelectProject' // 项目
import { getProjectImageProgress, planLabel, insertSelective, updateByPrimaryKeySelective, getProjectProductionShiftRecordById } from '@/api/project/productionShiftRecord'
import { getInfoByStaffId } from '@/api/commons'
import { getAuditProject } from '@/api/themeChoose/themeChoose'

export default {
  name: 'Update',
  data() {
    return {
      memberList: [], // 形象进度list
      fetching: false,
      loading: false,
      spinning: false,
      formType: '',
      form: {
        branchId: '',
        imageProgressId: undefined, // 形象进度id
        imageProgressName: '', // 形象进度名称
        branchName: '',
        pmName: null, // 项目经理名字
        pmId: null, // 项目经理id
        pmPhone: null, // 项目经理电话
        projectName: undefined,
        projectAddress: '',
        creatorName: '',
        createTime: '',
        shiftContent: '', // 带班内容
        shiftDate: '' // 带班日期
      },
      rules: {
        branchId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        imageProgressId: [{ required: true, message: '请选择形象进度', trigger: 'change' }],
        shiftDate: [{ required: true, message: '请选择带班日期', trigger: 'change' }],
        shiftContent: [{ required: true, message: '请输入带班内容', trigger: 'change' }]
      },
      id: null,
      pageType: ''
    }
  },

  components: { SelectSubCompany, SelectProject },

  computed: {},

  created() {
    const id = this.$route.query.id
    this.formType = this.$route.query.type === 'look' ? 'disable' : ''
    this.planLabel()
    if (id) {
      this.id = id
      this.getProjectProductionShiftRecordById()
      return
    }
    this.initHandle()
  },

  mounted() {},

  methods: {
    selectOrg(val) {
      if(val&&val.length) {
        this.$refs.form.clearValidate(['projectId'])
        this.form.projectId = val[val.length - 1].projectId
        this.form.branchId = val[val.length - 2].orgId
        this.form.branchName = val[val.length - 2].orgName
      }
    },
    getProjectInfo(val) {
      const { projectName, realityPmName, realityPmId, projectId } = val
      this.form.projectName = projectName
      this.form.pmName = realityPmName
      this.form.pmId = realityPmId
      realityPmId && this.getInfoByStaffId(realityPmId)
      this.getProjectImageProgress(projectId)
      this.$forceUpdate()
    },
    // 获取带班详情
    getProjectProductionShiftRecordById() {
      this.spinning = true
      getProjectProductionShiftRecordById(this.id)
        .then((res) => {
          this.spinning = false
          this.form = res.data
        })
        .catch(() => {
          this.spinning = false
        })
    },
    // 提交
    submitHandler(type) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 过滤掉 creatorName、 createTime
          const cloneData = JSON.parse(JSON.stringify(this.form))
          delete cloneData.creatorName
          delete cloneData.createTime
          cloneData.status = 1
          if (type == 'draft') {
            this.loading = true
            cloneData.status = 0
            if (this.id) {
              this.id && (cloneData.id = this.id)
              updateByPrimaryKeySelective(cloneData)
                .then((res) => {
                  this.loading = false
                  if (type == 'draft') {
                    this.$message.success('保存成功')
                  } else {
                    this.$message.success('提交成功')
                  }
                  this.$close()
                })
                .catch(() => {
                  this.loading = false
                })
            } else {
              insertSelective(cloneData)
                .then((res) => {
                  this.loading = false
                  if (type == 'draft') {
                    this.$message.success('保存成功')
                  } else {
                    this.$message.success('提交成功')
                  }
                  this.$close()
                })
                .catch(() => {
                  this.loading = false
                })
            }
          } else {
            this.$confirm({
              title: '提交',
              content: '请确认是否要提交,提交后不可修改？',
              onOk: async () => {
                this.loading = true
                if (this.id) {
                  this.id && (cloneData.id = this.id)
                  updateByPrimaryKeySelective(cloneData)
                    .then((res) => {
                      this.loading = false
                      if (type == 'draft') {
                        this.$message.success('保存成功')
                      } else {
                        this.$message.success('提交成功')
                        this.$close()
                      }
                    })
                    .catch(() => {
                      this.loading = false
                    })
                } else {
                  insertSelective(cloneData)
                    .then((res) => {
                      this.loading = false
                      if (type == 'draft') {
                        this.$message.success('保存成功')
                      } else {
                        this.$message.success('提交成功')
                        this.$close()
                      }
                    })
                    .catch(() => {
                      this.loading = false
                    })
                }
              }
            })
          }
        } else {
          this.$message.warn('信息填写不完整')
        }

      })
    },
    // 绑定时间
    onChangeShiftDate(date, dateString) {
      this.form.shiftDate = dateString
    },
    // 禁用时间
    disabledDate(current) {
      return current && current > this.moment().subtract(0, 'days')
    },
    // 初始化
    initHandle() {
      // 检查人
      this.form.creatorName = JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
      this.form.createTime = this.moment().format('YYYY-MM-DD')
      this.form.shiftDate = this.moment().format('YYYY-MM-DD')
    },
    // 获取分公司的名字
    changeSelectSubCompany(val = '') {
      const { company } = this.$refs.SelectSubCompany
      if (val !== '') {
        const { orgName } = company.filter((v) => v.orgId === val)[0]
        this.form.branchName = orgName
      }
    },
    // 获取项目经理、 项目名称
    getManagerNameReq(val) {
      const { projectName, pmName, pmId, projectId } = this.$refs.projectDom.project.filter((v) => v.projectId === val)[0]
      this.form.projectName = projectName
      this.form.pmName = pmName
      this.form.pmId = pmId
      pmId && this.getInfoByStaffId(pmId)
      this.getProjectImageProgress(projectId)
    },
    // 获取项目经理电话
    getInfoByStaffId(id) {
      getInfoByStaffId(id).then((res) => {
        this.form.pmPhone = res.data.phone
      })
    },
    // 项目编号
    projectNums(val) {
      this.form.projectCode = val
    },
    // 关闭
    handleClose() {
      this.$close()
    },
    // 带出形象进度
    getProjectImageProgress(projectId) {
      getProjectImageProgress(projectId).then((res) => {
        const { projectAddress, imageProgressId, imageProgressName } = res.data
        this.form.projectAddress = projectAddress
        // form表单这个形象有值得话，就不采用带出得形象了
        if (imageProgressId && !this.form.imageProgressId) {
          this.form.imageProgressName = imageProgressName
          this.form.imageProgressId = imageProgressId
        }
      })
    },
    // 获取形象进度
    planLabel() {
      this.fetching = true
      planLabel()
        .then((res) => {
          this.fetching = false
          this.memberList = res.data
        })
        .catch(() => {
          this.fetching = true
        })
    },
    // 绑定当前形象的name
    changeImageProgress(val) {
      const currentItem = this.memberList.filter((v) => v.id === val)
      currentItem && currentItem.length && (this.form.imageProgressName = currentItem[0].name)
    }
  }
}
</script>
<style lang='less' scoped>
@deep: ~'>>>';
@{deep}.custom-width {
  .ant-form-item-label {
    width: 115px !important;
  }
}
</style>
